<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../build/react.js"></script>
    <script src="../build/jquery-2.1.4.min.js"></script>
    <script src="../build/JSXTransformer.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
    <script type="text/jsx">
        var CommentBox = React.createClass({
            loadCommentsFromServer:function(){
                $.ajax({
                    url:this.props.url,
                    dataType:"json",
                    success:function(data){
                        this.setState({data:data});
                    }.bind(this),
                    error:function(xhr,status,err){
                        console.error(this.props.url,status,err.toString());
                    }.bind(this)
                });
            },
            getInitialState:function(){
                return {data:[]};
            },
            componentDidMount:function(){
                this.loadCommentsFromServer;
                setInterval(this.loadCommentsFromServer,this.props.pollInterval);
            },
            render:function(){
                return (
                        <div className="commentBox">
                            <h1>Comments</h1>
                            <CommentList data={this.state.data} />
                            <CommentForm />
                        </div>
                )
            }
        });

        var CommentList = React.createClass({
            render:function(){
                var commentNodes = this.props.data.map(function(comment){
                    return (
                            <Comment author={comment.name}>
                                {comment.text}
                            </Comment>
                    );
                });
                return (
                        <div className="commentList">
                            {commentNodes}
                        </div>
                );
            }
        });

        var CommentForm = React.createClass({
            render:function(){
                return (
                        <div className="commentForm">
                            Hello world.I am a commentForm.
                        </div>
                );
            }
        });

        var converter = new Showdown.converter();

        var Comment = React.createClass({
            render:function(){
                return (
                        <div className="comment">
                            <h2 className="commentAuthor">
                                {this.props.name}
                            </h2>
                            {converter.makeHtml(this.props.children.toString())}
                        </div>
                );
            }
        });

        //渲染
        React.render(
                <CommentBox url="comment.json" pollInterval={2000} />,
                document.getElementById("example"),
                function(){
                    console.log("我被渲染了...");
                }
        );
    </script>
</head>
<body>
<h2 id="example"></h2>
</body>
</html>